<!DOCTYPE html>
<html>

<head>
    <title>{{ .Title }}</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .email-container {
            background-color: #ffffff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            width: 80%;
            max-width: 600px;
            text-align: center;
            box-sizing: border-box; /* Ensure padding and border are included in the element's total width and height */
        }

        h3 {
            color: #333;
        }

        p {
            color: #555;
            line-height: 1.6;
        }

        .code {
            font-size: 24px;
            font-weight: bold;
            color: #e74c3c;
            background-color: #f9ecec;
            padding: 10px;
            border-radius: 5px;
            display: inline-block;
            margin-top: 10px;
        }

        footer {
            margin-top: 20px;
            font-size: 12px;
            color: #888;
            text-align: center;
        }

        footer a {
            color: #3498db;
            text-decoration: none;
        }

        @media (max-width: 600px) {
            body {
                flex-direction: column;
                height: auto;
                padding: 20px;
            }

            .email-container {
                width: 100%;
                margin-bottom: 20px;
            }

            footer {
                margin-top: 20px;
                width: 100%;
            }
        }
    </style>
</head>

<body>
    <div class="email-container">
        <h3>您的 ChatTogether 登录验证码</h3>
        <p>您好，</p>
        <p>感谢您使用 ChatTogether。为了确保您的账户安全，请在登录页面输入以下验证码：</p>
        <div class="code">{{.code}}</div>
        <p>请注意，验证码有效期为10分钟。如果您没有请求此验证码，请忽略此邮件。</p>
        <p>如果您在使用过程中有任何问题或需要帮助，请随时联系我们的客服团队，我们将竭诚为您服务。</p>
        <p>祝您使用愉快！</p>
    </div>
    <footer>
        由 <a href="http://localhost:3747/">@邓氏集团</a> 提供技术支持
    </footer>
</body>

</html>
